import { useEffect, useState } from 'react';
import style from './index.module.scss';
import './index.module.scss';
import { ActionSheet, Radio, Cell } from 'react-vant';
import { Cross, WechatPay, Alipay } from '@react-vant/icons';
import selected from '@/assets/images/daily-recharge/selected.png';
import CountdownTimer from './countdown';
import { useNavigate } from 'react-router-dom';

console.log(process.env.REACT_APP_ENV);
const BaseUrl =
    process.env.REACT_APP_ENV === 'prod'
        ? 'https://webapi.pupupal.com'
        : 'https://kk-test-webapi.sayhaiapp.com';

const Content = ({ showPayPage, onClose }) => {
    const navigate = useNavigate();
    const urlParams = new URLSearchParams(window.location.search);
    const authorizationToken = urlParams.get('userId');
    console.log('authorizationToken', authorizationToken);
    const [payType, setPayType] = useState(1);

    const getSweetRank = async () => {
        fetch(`${BaseUrl}/gift/rank/week/star/charm/rank`, {
            method: 'GET',
            headers: {
                Authorization: authorizationToken,
            },
        })
            .then((response) => response.json())
            .then((response) => {
                if (response.code === 200 && response.data) {
                } else {
                    console.error('Failed to fetch ranking data:');
                }
            })
            .catch((error) =>
                console.error('Error fetching ranking data:', error)
            );
    };

    const clickPay = () => {
        console.log('clickPay');
        navigate('/result');
    };

    useEffect(() => {
        // if (authorizationToken) {
        //     if (type === 1) {
        //         getSweetRank();
        //     } else {
        //         getLikeRank();
        //     }
        // } else {
        //     console.error('Authorization token not found in URL');
        // }
    }, []);

    return (
        <div className={style.payPage}>
            <ActionSheet
                className={'sheet'}
                visible={showPayPage}
                onCancel={onClose}
                closeable={true}
            >
                <div className={'bottomContainer'}>
                    <Cross
                        className={'closeBtn'}
                        fontSize={48}
                        onClick={onClose}
                    />
                    <div className={'content'}>
                        <p className={'title'}>支付页</p>
                        <p className={'count'}>￥6.00</p>
                        <CountdownTimer />
                        <div className={'detailBox'}>
                            <div className={'detail'}>订单详情</div>
                            <div className={'desc'}>6元每日首充</div>
                        </div>
                        <div className={'detailBox'}>
                            <div className={'detail'}>付款方式</div>
                        </div>
                        <div className={'payTypeBox'}>
                            <div
                                className={'payTypeItem'}
                                onClick={() => setPayType(1)}
                            >
                                <div className="payType">
                                    <Alipay
                                        className="icon"
                                        fontSize={42}
                                        color="#1A76E9"
                                    />
                                    支付宝
                                </div>
                                {payType === 1 ? (
                                    <img className="selected" src={selected} />
                                ) : (
                                    <div className="radioBox"></div>
                                )}
                            </div>
                            <div
                                className={'payTypeItem'}
                                onClick={() => setPayType(2)}
                                style={{ marginTop: '48px' }}
                            >
                                <div className="payType">
                                    <WechatPay
                                        className="icon"
                                        fontSize={42}
                                        color="#00C800"
                                    />
                                    微信支付
                                </div>
                                {payType === 2 ? (
                                    <img className="selected" src={selected} />
                                ) : (
                                    <div className="radioBox"></div>
                                )}
                            </div>
                        </div>
                        <div className="payBtn" onClick={clickPay}>
                            立即支付
                        </div>
                    </div>
                </div>
            </ActionSheet>
            {/* <div className={style.bottomContainer}>
        <div className={style.closeBtn}></div>
      </div> */}
        </div>
    );
};

export default Content;
